<template>
  <view>
    <view class="wrap">
      <view class="top">
        <view class="item">
          <view class="left">收货人</view>
          <input
            type="text"
            placeholder-class="line"
            v-model="addresslist.consignee"
            placeholder="请填写收货人姓名"
          />
        </view>
        <view class="item">
          <view class="left">手机号码</view>
          <input

            type="text"
            v-model="addresslist.mobile"
            placeholder-class="line"
            placeholder="请填写收货人手机号"
          />
        </view>
        <view class="item" @tap="showRegionPicker">
          <view class="left">所在地区</view>
          <pick-regions
            :defaultRegion="defaultRegionCode"
            @getRegion="handleGetRegion"
          >
            <input
              disabled
              v-model="regionName"
              type="text"
              placeholder-class="line"
              placeholder="省市区县、乡镇等"
            />
          </pick-regions>
        </view>
        <view class="item address">
          <view class="left">详细地址</view>
          <textarea
            type="text"
            placeholder-class="line"
            placeholder="街道、楼牌等"
			v-model="addresslist.address"
          >
		  	{{ addresslist.address }}
		  </textarea
          >
        </view>
        <view class="site-clipboard">
				<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
				<view class="clipboard">
					地址粘贴板
					<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
				</view>
			</view>
      </view>
      <view class="bottom">
        <view class="tag">
          <view class="left">标签</view>
          <view class="right">
            <text
              class="tags"
              :class="{ 'red-border': currentTag === 'home' }"
              @click="changeTag('home')"
              >家</text
            >
            <text
              class="tags"
              :class="{ 'red-border': currentTag === 'business' }"
              @click="changeTag('business')"
              >公司</text
            >
            <text
              class="tags"
              :class="{ 'red-border': currentTag === 'school' }"
              @click="changeTag('school')"
              >学校</text
            >
            <text
              class="tags"
              :class="{ 'red-border': currentTag === 'sj' }"
              @click="changeTag('sj')"
              >默认</text
            >
          </view>
        </view>
        <view class="default">
          <view class="left">
            <view class="set">设置默认地址</view>
            <view class="tips">提醒：每次下单会默认推荐该地址</view>
          </view>
          <view class="right"><switch color="#f56c6c" @change="setDefault" /></view>
        </view>
      </view>
      <u-picker mode="region" ref="uPicker" v-model="show" />
    </view>
    <view class="btn">
      <u-button
        type="error"
        shape="circle"
        @click="addAddDress"
        text="提交"
      ></u-button>
    </view>
    <u-toast ref="notice"></u-toast>
  </view>
</template>

<script>
import pickRegions from "@/components/pick-regions/pick-regions.vue";

export default {
  components: { pickRegions },
  onLoad() {
    this.busiessinfo = this.$u.business.check();
  },
  data() {
    return {
      busiessinfo: {},
	  code:0,
      addresslist: {
        consignee: "",
        mobile: "",
        province: "",
        address: "",
        city: "",
        district: "",
        tag: 0,
        status: 0,
      },
      currentTag: "", // 用于记录当前点击的标签
      region: [],
      defaultRegion: [],
      defaultRegionCode: "",
      show: false,
      //   regioncode:""
    };
  },
  computed: {
    regionName() {
      // 转为字符串
      return this.region.map((item) => item.name).join(" ");
    },
 
  },
  methods: {


    changeTag(tag) {
      // 更新当前点击的标签
      this.currentTag = tag;
      if (tag == "sj") {
        this.addresslist.tag = 0;
      } else if (tag == "home") {
        this.addresslist.tag = 1;
      } else if (tag == "business") {
        this.addresslist.tag = 2;
      } else {
        this.addresslist.tag = 3;
      }
      //   this.addresslist.tag =
    },
    setDefault(e) {
      if (e.detail.value) {
        this.addresslist.status = 1;
      } else {
        this.addresslist.status = 0;
      }
    },
    showRegionPicker() {
      this.show = true;
    },
    // 获取选择的地区
    handleGetRegion(region) {
      this.region = region;
	  this.code = region[2].code
    },
	async addAddDress() {
    let data = {
      busid: this.busiessinfo.id,
      consignee: this.addresslist.consignee,
      mobile: this.addresslist.mobile,
      address: this.addresslist.address,
      regionCode:this.code,
      tag: this.addresslist.tag,
	  status:this.addresslist.status
    };

	if(data.mobile =="")
	{
		this.$refs.notice.show({
			type:"error",
			message:"手机号不能为空",
			duration:1200,
		})

		return false

	}else
	{
		if(!this.$u.test.mobile(data.mobile))
		{
			this.$refs.notice.show({
			type:"error",
			message:"手机号格式有误",
			duration:1200,
		})

		return false

		}
	}

   

    let result = await this.$u.api.user.addressAdd(data);
    if (result.code) {
      this.$refs.notice.show({
        type: "success",
        message: result.msg,
        duration: 1200,
        complete: () => {

          uni.$u.route({
			type:"redirectTo",
            url: "pagesB/address/index",
            params: {
              busid: this.busiessinfo.id,
            },
          });
        },
      });
    } else {
      this.$refs.notice.show({
        type: "error",
        message: result.msg,
        duration: 1200,
        complete: () => {},
      });
    }
  },
  },

  
};
</script>

<style lang="scss" scoped>
.line {
  color: $u-light-color;
  font-size: 25rpx;
}
.wrap {
  background-color: #f2f2f2;
  .top {
    background-color: #ffffff;
    border-top: solid 2rpx $u-border-color;
    padding: 22rpx;
    .item {
      display: flex;
      font-size: 28rpx;
      line-height: 100rpx;
      align-items: center;
      border-bottom: solid 2rpx $u-border-color;
      .left {
        width: 180rpx;
      }
      input {
        text-align: left;
      }
    }

    .address {
      padding: 20rpx 0;
      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }
    }
    .site-clipboard {
      padding-right: 40rpx;
      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }
      .clipboard {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: $u-tips-color;
        height: 80rpx;
        .icon {
          margin-top: 6rpx;
          margin-left: 10rpx;
        }
      }
    }
  }
  .bottom {
    margin-top: 20rpx;
    padding: 40rpx;
    padding-right: 0;
    background-color: #ffffff;
    font-size: 26rpx;
    .tag {
      display: flex;
      .left {
        width: 160rpx;
      }
      .right {
        display: flex;
        flex-wrap: wrap;
        .tags {
          width: 140rpx;
          padding: 16rpx 8rpx;
          border: solid 2rpx $u-border-color;
          text-align: center;
          border-radius: 50rpx;
          margin: 0 10rpx 20rpx;
          display: flex;
          font-size: 24rpx;
          align-items: center;
          justify-content: center;
          color: $u-content-color;
          line-height: 1;
        }
        .plus {
          //padding: 10rpx 0;
        }
      }
    }
    .default {
      margin-top: 50rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: solid 2rpx $u-border-color;
      line-height: 64rpx;
      .tips {
        font-size: 24rpx;
      }
      .right {
      }
    }
  }
}
.btn {
  width: 70%;
  margin: 50px auto;
}

/* 边框变红色的样式 */
.red-border {
  border-color: #f56c6c !important;
}
</style>
